<template>
    <div class="mask" v-show="visible">
      <transition name="fade-top">
        <div class="dialog" v-show="visible" :style="'width:'+width">
          <div class="title">
            <span>{{title}}</span>
            <i v-if="isComponent" class="el-icon-close" @click="$emit('handleCancel')"></i>
            <i v-if="!isComponent" class="el-icon-close" @click="$emit('update:visible', false)"></i>
          </div>
          <slot></slot>
        </div>
      </transition>
    </div>
</template>
<script>
export default {
  props: ['title', 'width', 'visible','isComponent'],
  data () {
    return {
      show : false
    }
  },
  methods: {
    goBack() {
      this.$emit('update:visible', false)
      this.$emit('back')
    }
  }
}
</script>
<style lang="scss" scoped>
  .mask{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
    min-width: 1200px;
    z-index: 111;
    .dialog{
      min-width: 200px;
      max-height: 90%;
      overflow: auto;
      background-color: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
    //   border-radius: 12px;
      .title{
        padding:16px 20px;
        font-size: 16px;
        background:#e8e8e8;
        color: #333333;
        .el-icon-close{
          float: right;
          cursor: pointer;
        }
      }
    }
  }
</style>
